<template>
  <div class="container">
    <iframe-page ref="mapRef" :type="iframeType"/>
    <!--    <dialog-log ref="logDialogLog" :show="showDialogLog" @close="onCloseLog"/>-->
    <dialog-set v-if="showDialogSet" ref="logDialogSet" @close="onCloseSet"/>
    <div class="index-root">
      <div class="index-empty-top"/>
      <div :style="pageNavSelected === 20 ? 'position: relative;':''" class="index-content">
        <overview v-if="pageNavSelected === 10"/>
        <security v-if="pageNavSelected === 20"/>
        <attend-house v-if="pageNavSelected === 30"/>
        <RunningState v-if="pageNavSelected === 40"/>
      </div>
      <div class="index-header">
        <div class="index-page-title">
          <div class="title-wrap-1">
            娄桥基地运管平台
          </div>
          <div class="title-wrap-2">
            {{
              "Louqiao Base Operations Management Platform".toUpperCase()
            }}
          </div>
        </div>
        <div class="index-page-nav">
          <div :class="{warpRight:pageNavSelected === 40}" class="nav-wrap-box">
            <nav-wrap :datas="navWrapItem({ pageChange: onPageChange })"/>
          </div>
        </div>
        <div class="index-page-info-bar">
          <div class="left">
<!--            <div @click="logout">-->
<!--              <LoginOutlined/>-->
<!--              退出登录-->
<!--            </div>-->
            <div @click="onOpenSet">
              <SettingOutlined/>
              设置
            </div>
          </div>
          <div class="right">
            <div class="time flex-center">
              <div>
                <FieldTimeOutlined/>
                {{ date }}
              </div>
              <div>{{ time }}</div>
            </div>
            <weather/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <MyRouter></MyRouter>
  <DialogCamera v-if="showCamera" :url="CameraUrl" @close="showCamera = false"/>
  <Preview v-if="showPreview" :url="PreviewUrl" @close="showPreview = false"/>

</template>

<script setup>
import {computed, inject, onMounted, provide, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {navWrapItem, pageName} from "./datas.js";

import MyRouter from "@/components/customs/myRouter/index.vue";
import IframePage from "@/components/customs/iframe/index.vue";
import Weather from "@/components/customs/weather/index.vue";
import DialogSet from "@/components/customs/dialog-set/index.vue";
import Overview from "@/pages/overview/index.vue";
import Security from "@/pages/security/index.vue";
import RunningState from "@/pages/running-state/index.vue";
import AttendHouse from "@/pages/attend-house";
import {dateTransform} from "@/common/tool.js";
import {reactive} from "@vue/reactivity";
import {FieldTimeOutlined, LoginOutlined, SettingOutlined} from "@ant-design/icons-vue";
import NavWrap from "@/components/customs/nav-wrap/index.vue";
import {SqlApi} from "@/common/customs/overview";
import DialogCamera from "@/components/customs/dialog-camera/index.vue";
import Preview from "@/components/customs/preview/index.vue";


const mapRef = ref();
const date = ref("");
const time = ref("");
const week = ref("");
const CameraUrl = ref("");
const PreviewUrl = ref("");
const router = useRouter();
const userInfo = inject("userInfo");
const isLoading = inject("isLoading");
const pageNavHistory = ref([-1]);
const pageNavSelected = ref(10);
const iframeType = ref("static");
const showDialogSet = ref(false);
const showCamera = ref(false);
const showPreview = ref(false);
const logDialogSet = ref();
const route = useRoute();
const smartObject = reactive({
  xh: 0,
  gjxh: "",
  sj: "",
  isFk: false,
  msr: 0,
  msrList: [],
  list: [],
  ssl: "",
  sslObj: {},
  isXh: false,
  gjtype: 0,
  gjid: 0,
});
const indexPageName = computed(() => {
  // return pageName.map((item) => item.name);
  return pageName;
});
const logout = () => {
  userInfo.init(true);
  router.replace({
    path: "/login"
  });
};
const onPageChange = (index) => {
  const iframeOrigin = document.getElementById("iframe-origin");
  pageNavSelected.value = index;
  iframeOrigin.style.opacity = "1";
  if (index === 30){
    iframeType.value = "camera";
  }else {
    iframeType.value = "static";
  }
};
const playCamera = async (code) => {
  console.log(code);
  try {
    isLoading.value = true;
    const api = new SqlApi().params({
      cameraIndexCode: code,
    });
    await api.send();
    const data = await api.getDatas();
    CameraUrl.value = data.data;
    showCamera.value = true;
    isLoading.value = false;
  } catch (e) {
    console.log(e);
    isLoading.value = false;
  }
};
const playPreview = async (url) => {
  console.log(url);
  PreviewUrl.value = url
  showPreview.value = true
};
const setIFrameType = (type) => {
  iframeType.value = type;
};

const onOpenSet = () => {
  showDialogSet.value = true;
};

const onCloseSet = () => {
  showDialogSet.value = false;
};

onMounted(() => {
  provide("resetMap", mapRef.value);
  if (route.query.page) {
    onPageChange(Number(route.query.page));
  }
  setInterval(() => {
    date.value = dateTransform().date;
    time.value = dateTransform().time;
    week.value = dateTransform().weekdayName[1];
  }, 1000);
});

provide("pageChange", onPageChange);
provide("smartObject", smartObject);
provide("setIFrameType", setIFrameType);
provide("playCamera", playCamera);
provide("playPreview", playPreview);
provide("getPageInfo", () => pageNavHistory.value.slice(-2, pageNavHistory.value.length));
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
